import React, { useEffect } from 'react'
import { NavBar, Toast, ActionBar,Image } from 'react-vant';
import { CartO, ChatO, Star } from '@react-vant/icons';
import { useLocation, useNavigate, useParams } from "react-router-dom"
import { useSelector,useDispatch } from 'react-redux';
import { GETINFO, ALLSTATE, GETLIST,LISTTYPE,ITEMTYPE } from "../../types/store.d"

import * as Action from "../../actions/index"
import { connect } from 'react-redux'
import { bindActionCreators, Dispatch } from 'redux';
function Detail() {
  const location = useLocation();
  const navigate = useNavigate();
  const params = useParams();
  const dispatch = useDispatch()
  let id:string =params.id as string
  useEffect(()=>{
    dispatch(Action.get_obj(id))
  },[])
  const myobj = useSelector((state: ALLSTATE) => {
    return state.obj
  })
  console.log(myobj);
  console.log(id);
  
  return (
    <div>
      <NavBar
        title="商品详情"
        leftText="返回"
        rightText="按钮"
        onClickLeft={() => navigate("/")}
        onClickRight={() => Toast('按钮')}
      />
     <div>
     <Image lazyload width="300" height="300" src={myobj.img}/>
                  <p>{myobj.title}</p>
                  <p>价格{myobj.price}</p>
                  <p>数量{myobj.num}</p>
     </div>
      <div className='demo-action-bar'>
        <ActionBar>
          <ActionBar.Icon icon={<ChatO color="red" />} text="客服" />
          <ActionBar.Icon icon={<CartO color="red" />} text="购物车" />
          <ActionBar.Icon icon={<Star color="red" />} text="店铺" />
          <ActionBar.Button type="warning" text="加入购物车" />
          <ActionBar.Button type="danger" text="立即购买" />
        </ActionBar>
      </div>
    </div>
  )
}





const mapStateToProps = (state:ALLSTATE) => ({})

const mapDispatchToProps = (dispatch:Dispatch)=>{
 return  {...bindActionCreators(Action,dispatch)}
}

export default connect(mapStateToProps, mapDispatchToProps)(Detail)
